﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" http-equiv="Content-Type" content="user-scalable=no, maximum-scale=1, minimum-scale=1, initial-scale=1.0" />
    <meta charset="UTF-8">
    <title></title>
    <link href="http://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
    <link href="css/pageStyle.css" rel="stylesheet" />
    <style>
        @charset "utf-8";

        html, body {
            /*font-family: sans-serif;*/
            font-family: "Helvetica" !important;
            /*font: 400 14px/1.5 arial,"lucida grande",verdana,"microsoft yahei",hei;*/
            /*font-size: 10px;*/
            /*background-color: #f2f4f7;*/
            background-color: #eee;
        }

        body {
            /*font-family: "Hiragino Sans GB W3","microsoft yahei","WenQuanYi Micro Hei",sans-serif !important;*/
            /*font-family: "Helvetica Neue",Helvetica,STHeiTi,sans-serif;*/
            overflow-x: initial !important;
            width: 10rem;
            zoom: 1;
            margin: 0 auto;
        }

        @media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
            .banner ul li {
                height: 180px;
            }
        }
    </style>
</head>
<body style="padding: 0 15px 40px 0;">
    <div ng-app="myApp" class="container-fluid">
        <div id="divSearchList" ng-controller="searchShopCtrl">
            <div class="row">
                <header class="list-head">
                    <a class="newback" href="index.html"></a>
                    <div class="list-type-cnt">
                        <div class="list-type" ng-model="amount" style="line-height: 30px">
                            <!--<a href="/tuan/foshan?sc=10&amp;sr=0">-->
                            <span id="spanTitle" style="color: red">为您找到{{amount}}个结果</span>

                            <!--</a>-->
                        </div>
                    </div>
                    <div id="btnSearchInfo" class="newsearch J_search_trigger"></div>
                </header>
            </div>
            <div class="row spliter"></div>
            <div id="divSearchShop">
                <div id="divBackToTop" class="back_top back_top-processed" style="display: block; z-index:2">
                </div>
                <div class="row">
                    <ul when-scrolled="loadMore()" style="list-style:none;padding:0px;margin-bottom:0px">
                        <li ng-repeat="x in names" class="z-m-product-item" tag="{{x.ID}}" onclick="ViewDetails(this)">
                            <a href="#">
                                <div class="item-top">
                                    <div class="product-image">
                                        <img src="{{x.ImageUrl}}">
                                    </div>
                                    <div class="product-extra">
                                        <span>舵手</span>
                                        <span class="separator">|</span>
                                        <span>{{$index >5 ? '今日新品' : '舵手推荐' }}</span>
                                    </div>
                                    <div class="product-price price-schema-1">
                                        <div class="product-price-now">￥<em>{{x.AfterPrice}}</em></div>
                                        <div class="product-promotion">原价￥<s>{{x.CurrentPrice}}</s></div>
                                    </div>
                                    <span class="product-recommend-label"><em>New</em></span>
                                </div>
                                <div class="item-bottom">
                                    <h5 class="product-title">{{x.Title}}</h5>
                                    <p class="product-describe">优惠券<span style="color:red">{{x.DiscountPrice}}</span>元，剩余数量<span style="color:red">{{x.SurplusAmount}}</span>/{{x.TotalAmount}}，销量<span style="color:red">{{x.SaleAmount}}</span>  </p>
                                </div>
                            </a>
                            <div ng-show='busy'>数据加载中，请稍候...</div>
                            <div ng-if="$index+1!=names.length" class="spliter"></div>
                            <div ng-if="$index+1==names.length" class="spliter" style="border-bottom: 0px; text-align: center; font-size: 12px; color: gray; padding-top:24px">感谢都是你，陪我到最后!</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="divSearch" class="hidden">
            <div class="search_container row">
                <form class="J_form">
                    <div class="head_cnt">
                        <div class="head_cnt_input" style="padding-left:25px">
                            <input type="text" placeholder="想要的，和更想要的" id="keywrod" name="keyword" class="search J_search_input" autocomplete="off">
                            <!--<i class="clear" data-role="clear"></i>-->
                            <input type="submit" onclick="Search()">
                        </div>
                        <a id="btnCancelSearchInfo" class="cancel J_cancel" href="#">取消</a>
                    </div>
                </form>
            </div>
        </div>

        <div id="divEvent" class="hidden">
            <div id="divEventDetails" ng-controller="searchGoodsDetailsCtrl">
                <div class="row" ng-model="names">
                    <div>
                        <div id="divHeaderBtn">
                            <div style="position: absolute; top: 21px; left: 22px; border: 0; z-index: 888; padding: 0; margin: 0; background-color:transparent">
                                <a href="#" tag="back"><span class="glyphicon glyphicon-chevron-left" style="color:white"></span></a>
                            </div>
                            <a class="back"></a>
                        </div>
                        <img class="img-responsive" width="100%" src="{{names.ImageUrl}}" />
                    </div>
                    <div class="eventPadding">
                        <div style="padding-top: 2px;">
                            <span>{{names.Title}}</span>
                        </div>
                        <div style="border-bottom: 1px solid #E0DFDF; padding-top: 12px; "></div>
                        <div style="margin: 0px; padding-top: 10px;">
                            <span style="color: #AF7E2A;">{{names.Description}}</span>
                            <p style="color:red;padding: 6px 0px 3px 0px; margin:0px">
                                券后价<strong>￥{{names.AfterPrice}} </strong><span style="color:gray;font-size:12px;padding-left:10px">原价: <s>￥{{names.CurrentPrice}}</s> </span>
                            </p>
                        </div>
                    </div>
                    <div class="spliter"></div>
                    <div class="eventPadding">
                        <div style="padding-top: 2px;">
                            <span>优惠券信息</span>
                        </div>
                        <div style="border-bottom: 1px solid #E0DFDF; padding-top: 12px; "></div>
                        <div>
                            <div class="tip-title">金额</div>
                            <div class="tip-des">优惠券 {{names.DiscountPrice}} 元</div>
                        </div>
                        <div>
                            <div class="tip-title">使用规则</div>
                            <div class="tip-des">{{names.Rule}}</div>
                        </div>
                        <div>
                            <div class="tip-title">剩余数量</div>
                            <div class="tip-des">优惠券剩余 {{names.SurplusAmount}} 张，已领券{{names.UsedAmount}}张</div>
                        </div>
                        <div>
                            <div class="tip-title">有效期</div>
                            <div class="tip-des">过期时间{{names.ExpiredTime | date:'yyyy/MM/dd' }}</div>
                        </div>
                    </div>
                    <div class="spliter"></div>

                    <div id="divViewMask" class="hidden">
                        <!--被遮罩的容器class='detail_body_blur'会出现模糊效果-->
                        <div class="detail_mask" style="display: block;">
                            <div class="detail_mask_bd" style="max-height:100%;overflow-y:auto;">
                                <iframe id="ifViewTao" width="100%" height="1000px" src=""></iframe>
                            </div>
                            <span class="detail_mask_close"></span>
                        </div>
                    </div>

                    <div id="divBuyMask" class="hidden">
                        <div class="detail_mask" style="display: block;">
                            <div class="detail_mask_bd" style="max-height:100%;overflow-y:auto;">
                                <iframe id="ifBuyTao" width="100%" height="1000px" src=""></iframe>
                            </div>
                            <span class="detail_mask_close"></span>
                        </div>
                    </div>

                </div>
            </div>

            <div id="divFooter">
                <nav class="navbar navbar-default navbar-fixed-bottom" style="border: 0px; min-height:40px;background-color:white">
                    <table class="table" id="tbNavigation" style="text-align: center; margin-bottom:0px;">
                        <tr>
                            <td style="padding: 2px 5px 2px 5px; margin: 0px;">
                                <img src="img/share-25.png" width="18" />
                                <div style="font-size: smaller; padding-top: 2px;">分享</div>
                            </td>
                            <td style="padding:0px;border:0px"><a href="#" onclick="Go('view');" class="button button-block button-highlight btn-lg-order-status" style="padding:0px; line-height:48px; height:45px">点击看详情</a></td>
                            <td style="padding: 0px; border: 0px"><a href="#" onclick="Go('buy');" class="button button-block button-caution btn-lg-order-status" style="padding: 0px; line-height: 48px; height: 45px; ">免费领券</a></td>
                        </tr>
                    </table>
                </nav>
            </div>
        </div>

    </div>
</body>
</html>
<script src="script/app.js"></script>
<script src="script/common.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>

    var scrollHeight = 0;

    var startLoad = true;

    var app = angular.module('myApp', []);

    var par = common.getUrlArgStr();
    if (!common.checkValue(par.cd) || !common.checkValue(par.type))
        window.location = "index.html";

    common.CreatePullDownCtrl({ name: 'searchShopCtrl', dictName: 'whenScrolled', url: 'api/values/search', pars: { limit: 10, type: par.type, condition: par.cd }, app: app });
    common.CreateController({ name: 'searchGoodsDetailsCtrl', objType: "object", app: app });

    function Search() {
        var val = $("#keywrod").val();
        if (!common.checkValue(val))
            return;

        window.location = encodeURI("list.html?cd=" + val + "&type=All");
    }

    function AfterCompleted(ctx) {
        if (ctx == null) {
            alert("无数据.");
            return;
        }

        var ele = document.querySelector("[ng-controller=searchGoodsDetailsCtrl]");

        angular.element(ele).scope().update(ctx);
    }

    function ViewDetails(obj) {

        var id = $(obj).attr('tag');
        common.commonAjax({ type: 'get', url: 'api/values/Get/' + id, sMethod: AfterCompleted });
        startLoad = false;
        scrollHeight = $(document).scrollTop();
        $("#divSearchList").hide();
        $("#divEvent").removeClass().show();
        scrollToTop();
    }

    function Go(type) {
        if (type == "view") {
            $("#divViewMask").removeClass().show();
        }
        else {
            $("#divBuyMask").removeClass().show();
        }

        $("#divFooter").hide();
    }

    $(".detail_mask_close").click(function () {
        $("#divFooter").removeClass().show();
        $("#divViewMask").hide();
        $("#divBuyMask").hide();
    })

    $("#divHeaderBtn").click(function () {
        startLoad = true;
        $("#ifViewTao").attr("src", "");
        $("#ifBuyTao").attr("src", "");
        $("#divEvent").hide();
        $("#divSearchList").show();
        $.scrollTo(scrollHeight, 1);
    });

    $("#btnSearchInfo").click(function () {
        $("#divSearchList").hide();
        $("#divSearch").removeClass().show();
    });

    $("#btnCancelSearchInfo").click(function () {
        $("#divSearch").hide();
        $("#divSearchList").show();
    });

</script>